import { Modal, Form, Input, InputNumber } from 'antd';
const FormItem = Form.Item;

const Dialog = Form.create()((props) => {
    const { visible, onCreate, onCancel, form, title } = props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
        labelCol: {
            span: 5
        },
        wrapperCol: {
            span: 18
        },
    };

     return (
         <Modal title={title}
                okText="Submit"
                visible={visible}
                onOk={onCreate}
                onCancel={onCancel}
         >
             <Form>
                 <FormItem {...formItemLayout} label="Name">
                     {getFieldDecorator('name', {
                         rules: [{ required: true, message: 'Please input your name!' }],
                     })(
                         <Input />
                     )}
                 </FormItem>
                 <FormItem {...formItemLayout} label='NickName'>
                     {getFieldDecorator('nickName', {
                         rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
                     })(
                         <Input />
                     )}
                 </FormItem>
                 <FormItem {...formItemLayout} label="Age">
                     {getFieldDecorator('age', {
                         rules: [{ required: true, message: 'Please input your age!' }],
                     })(
                         <InputNumber min={1} max={60} style={{width: 355}}/>
                     )}
                 </FormItem>
                 <FormItem {...formItemLayout} label="E-mail">
                     {getFieldDecorator('email', {
                         rules: [{
                             type: 'email', message: 'The input is not valid E-mail!',
                         }, {
                             required: true, message: 'Please input your E-mail!',
                         }],
                     })(
                         <Input />
                     )}
                 </FormItem>
                 <FormItem {...formItemLayout} label="Phone">
                     {getFieldDecorator('phone', {
                         rules: [{
                             required: true, message: 'Please input your phone number!'
                         }],
                     })(
                         <Input type="number"/>
                     )}
                 </FormItem>
                 <FormItem {...formItemLayout} label="Address">
                     {getFieldDecorator('address', {
                         rules: [{ required: true, message: 'Please input your address!' }],
                     })(
                         <Input />
                     )}
                 </FormItem>
             </Form>
         </Modal>
     )
});

export default Dialog;